<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色菜单管理</title>
</head>
<body>
<table id="user_roleTable" fit="true"></table>
<div id="tb">
	<a class="easyui-linkbutton" iconCls="icon-reload" onclick="editUserRole()" plain="true">用户角色配置</a>
</div>

<div id="roleDialog">
	<form id="roleForm" method="post">
		<input type="hidden" id="userId" name="userId"/>
		<table align="center" cellspacing="5px"  cellpadding="6px" style="margin-top: 15px;">
			<c:forEach items="${roleList }" var="role1" step="5" varStatus="varStatus1">
				<c:if test="${varStatus1.index%5 == 0 }">
					<tr >
						<c:forEach items="${roleList }" var="role" begin="${varStatus1.index }" end="${varStatus1.index+4 }" varStatus="varStatus2">
							<td> 
								<label ><input type="checkbox" name="roleId" value="${role.roleId }" flg="${role.roleName }"/>&nbsp;${role.roleName }</label>
							</td>
						</c:forEach>
					</tr>
				</c:if>
			</c:forEach>
		</table>
	</form>
</div>
<div id="tt">
	<a class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()">保存</a>
	<a class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancel()">取消</a>
</div>
</body>
<script type="text/javascript">
$(function(){
	$("#user_roleTable").datagrid({
		url:"${pageContext.request.contextPath}/getUserAndRoleByPage",
		title:"用户角色管理",
		toolbar:"#tb",
		fitColumns:true,
		rownumbers:true,
		pagination:true,
		singleSelect:true,
		columns:[[
			{field:'ck',checkbox:"true"},
			{field:"userId",title:"编号",width:2,align:"center"},
			{field:"userLoginname",title:"登录用户名",width:3,align:"center"},
			{field:"userNickname",title:"人员姓名",width:3,align:"center"},
			{field:"hasRole",title:"拥有角色名称",width:3,align:"center"}
		]]
	})
	
	$("#roleDialog").dialog({
		width:600,
		height:250,
		buttons:"#tt",
		closed:true
	})
	
})

function editUserRole(){
	var cks = $('#roleDialog input[type=checkbox]');
	$(cks).removeAttr("checked");
	var data = $("#user_roleTable").datagrid("getSelections");
	if(data.length==0){
		$.messager.alert("温馨提示","请选择要修改的用户!","info");
	}else if(data.length>1){
		$.messager.alert("温馨提示","请选择一条要修改的用户!","info");
	}else{
		$("#userId").val(data[0].userId);
		var hasRole = data[0].hasRole;
		var hasRoleArr = hasRole.split(",");
		for(var i in hasRoleArr){
			for(var j in cks){
				if($(cks[j]).attr("flg") == hasRoleArr[i]){
					$(cks[j]).prop("checked",true);
					break;
				}
			}
		}
		$("#roleDialog").dialog("open");
		$("#roleDialog").dialog("setTitle","配置角色");
	}
}

function save(){
	$("#roleForm").form("submit",{
		url:"${pageContext.request.contextPath}/editRoleOfUser",
		onSubmit:function(){
			var cks = $('#roleDialog input[type=checkbox]:checked');
			if(cks.length==0){
				$.messager.alert("温馨提示","请选择要用户的角色!","info");
				return false;
			}
		},
		success:function(data){
			if(data=='success'){
				$.messager.alert("","更新成功!","info",function(){
					$("#user_roleTable").datagrid("load");
					$("#roleDialog").dialog("close");
				});
			}else{
				$.messager.alert("温馨提示","删除失败!","info");
			}
		}
	})
}
function cancel(){
	$("#roleDialog").dialog("close");
}








</script>
</html>